<template>
  <div id="adminInsertBar">
    <el-form
        :model="insertData"
        :rules="insertRules"
        ref="insertData"
        label-position="right">
      <el-form-item label="用户名" label-width="100px" prop="username" >
        <el-input id="unameInfo" type="text" placeholder="请输入新用户名" v-model="insertData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="100px" prop="password" >
        <el-input id="pwdInfo" type="text" placeholder="请输入新密码" v-model="insertData.password"></el-input>
      </el-form-item>
      <el-form-item label="性别" label-width="100px" prop="gender" >
        <el-select id="genderInfo" v-model="insertData.gender" placeholder="请选择性别">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份" label-width="100px" prop="status" >
        <el-select id="statusInfo" v-model="insertData.status" placeholder="请选择身份">
          <el-option label="管理员" value="0"></el-option>
          <el-option label="注册用户" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" label-width="100px" prop="age" >
        <el-input id="ageInfo" type="text" placeholder="请输入年龄" v-model="insertData.age"></el-input>
      </el-form-item>
      <el-form-item label="电话" label-width="100px" prop="phone" >
        <el-input id="phoneInfo" type="text" placeholder="请输入电话号码" v-model="insertData.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮件" label-width="100px" prop="email" >
        <el-input id="emailInfo" type="text" placeholder="请输入邮箱" v-model="insertData.email"></el-input>
      </el-form-item>
      <el-form-item label-width="100px">
        <el-button type="primary" @click="insertUserData('insertData')">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {adminInsertUser} from "@/network/admin/adminInsertUser";

  export default {
    name: "adminInsertBar",
    data() {
      //校验手机号码
      let checkPhone = (rule, value, callback) => {
        let reg = /^1[345789]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入11位手机号'))
        } else {
          callback()
        }
      }
      return {
        insertData: {
          username: '',
          password: '',
          age: '',
          gender: '',
          phone: '',
          email: '',
          status: '',
        },
        insertRules: {
          username: [
            { required: true, message: '请输入新的用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
            { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' },
          ],
          status: [
            { required: true, message: '请选择身份', trigger: 'change' },
          ],
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { type: 'number', validator: checkPhone, message: '请输入11位有效手机号号码', trigger: ['blur', 'change'] }
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]
        },
      }
    },
    methods: {
      insertUserData(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // eslint-disable-next-line no-console
            console.log(this.insertData.username, this.insertData.password, this.insertData.age, this.insertData.gender, this.insertData.status, this.insertData.phone, this.insertData.email);
            adminInsertUser(this.insertData.username, this.insertData.password, this.insertData.age, this.insertData.gender, this.insertData.status, this.insertData.phone, this.insertData.email).then(res => {
              if (res.code === '1') {
                alert("添加成功");
                this.$router.go(0);
              }else {
                alert("添加失败");
              }
            }).catch(err => {
              // eslint-disable-next-line no-console
              console.log(err);
            })
          }
        })
      },
    },
  }
</script>

<style scoped>
  #adminInsertBar {
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 90%;
    border: 1px solid;
  }
  .el-form {
    position: relative;
    top: 0;
    width: 90%;
    height: 100%;
  }
</style>